<template>
  <div class="lll">
    <div class="banner" @mouseenter="enter" @mouseleave="leave" v-for='(image,index) in img' :key='index' v-show="index === mark" :style="{background:'url('+image+') center'}" >
      <div class="container">
        <!-- 轮播点 -->
        <div class="bullet" :style="{marginLeft:posCenter+'px'}">
          <span v-for="(item,index) in img.length" @click="change(index)" :key="index">
            <img src="../../assets/img/1-banner/img1/3.png" alt="" class="dotOne" v-if="index!=mark">
            <img src="../../assets/img/1-banner/img1/3-1.png" alt="" class="dotTwo" v-if="index==mark">
          </span>
        </div>
        <!-- 轮播控制器 -->
        <div class="switch">
          <img src="../../assets/img/1-banner/img1/1-1.png" alt="" class="arrowL" @click="prev" v-if="arrl==1" @mouseover="arrlchange" @mouseout="arrlout">
          <img src="../../assets/img/1-banner/img1/1.png" alt="" class="arrowL" @click="prev" v-if="arrl==0" @mouseover="arrlchange" @mouseout="arrlout">
          <img src="../../assets/img/1-banner/img1/2-2.png" alt="" class="arrowR" @click="next" v-if="arrr==1" @mouseover="arrrchange" @mouseout="arrrout">
          <img src="../../assets/img/1-banner/img1/2.png" alt="" class="arrowR" @click="next" v-if="arrr==0" @mouseover="arrrchange" @mouseout="arrrout">
        </div>
        <!-- 轮播图片内容 -->
        <transition name="fade">
        <div v-if="mark==0">
          <div class="smallContainer" :style="{top:topRoute+'px'}">
            <p class="oneP">海量独家KOL资源</p>
            <img src="../../assets/img/1-banner/img1/4.png" alt="" class="oneImg">
            <p class="twoP">精选网红APP，上万独家红人资源任您选</p>
            <img src="../../assets/img/1-banner/img1/6.png" alt="" class="twoImg">
            <img src="../../assets/img/1-banner/img1/5.png" alt="" class="threeImg">
            <img src="../../assets/img/1-banner/img1/9.png" alt="" class="fourImg">
            <img src="../../assets/img/1-banner/img1/7.png" alt="" class="fiveImg">
            <img src="../../assets/img/1-banner/img1/10.png" alt="" class="sixImg">
            <img src="../../assets/img/1-banner/img1/8.png" alt="" class="sevenImg">
          </div>
        </div>
        </transition>
        <transition name="fade">
        <div v-if="mark==1">
          <div class="smallContainer" :style="{top:topRoute+'px'}">
            <p class="oneP">媒体资源全网覆盖</p>
            <img src="../../assets/img/1-banner/img1/4.png" alt="" class="oneImg">
            <p class="twoP">优化广告投放过程，汇集优质账号，海量大V任您选</p>
            <img src="../../assets/img/banner-3/3.png" alt="" class="wechat">
            <img src="../../assets/img/banner-3/2.png" alt="" class="wechatBottom">
            <img src="../../assets/img/banner-3/7.png" alt="" class="weibo">
            <img src="../../assets/img/banner-3/6.png" alt="" class="weiboBottom">
            <img src="../../assets/img/banner-3/15.png" alt="" class="blue">
            <img src="../../assets/img/banner-3/14.png" alt="" class="blueBottom">
            <img src="../../assets/img/banner-3/4.png" alt="" class="oneai">
            <img src="../../assets/img/banner-3/5.png" alt="" class="oneaiBottom">
            <img src="../../assets/img/banner-3/9.png" alt="" class="yellow">
            <img src="../../assets/img/banner-3/8.png" alt="" class="yellowBottom">
            <img src="../../assets/img/banner-3/11.png" alt="" class="zise">
            <img src="../../assets/img/banner-3/10.png" alt="" class="ziseBottom">
            <img src="../../assets/img/banner-3/13.png" alt="" class="green">
            <img src="../../assets/img/banner-3/12.png" alt="" class="greenBottom">
          </div>
        </div>
        </transition>
          <transition name="fade">
        <div v-if="mark==2" @click="goToUrl('/luck')">
          <div class="smallContainer isbanner3" :style="{top:topRoute+'px'}">
            <p class="oneP">“品效运”合一</p>
            <img src="../../assets/img/banner-2/2.png" alt="" class="banner2Img1">
            <p class="ppp1 ppp"><img src="../../assets/img/banner-2/3.png" alt="">
              <span>品牌+效果+运营，三位一体</span>
            </p>
            <p class="ppp"><img src="../../assets/img/banner-2/4.png" alt="">
              <span>打造品牌*提升ROI*口碑推荐</span>
            </p>
            <p class="ppp"><img src="../../assets/img/banner-2/5.png" alt="">
              <span>“品效运”协同助力，实现营销价值最大化</span>
            </p>
          </div>
        </div>
          </transition>
      </div>
      <div class="needImg">

      </div>
    </div>
  </div>
</template>
<script>
import "../../assets/css/carousel.css";
const banner1 = require("../../assets/img/1-banner/img1/0.png");
const banner3 = require("../../assets/img/banner-2/1.png");
const banner2 = require("../../assets/img/banner-3/1.png");
export default {
  data() {
    return {
      scrollRoute: "",
      topRoute: 10,
      result1: "",
      mark: 0,
      img: [banner1, banner2, banner3],
      time: null,
      imgLen: "",
      imgArr: "",
      arrl: 0,
      arrr: 0
    };
  },
  components: {},
  methods: {
    goToUrl(path, id) {
      this.$router.push({
        path: path,
        query: { id: id }
      });
    },
    scroll() {
      this.scrollRoute =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (this.scrollRoute >= 60) {
        this.topRoute = 0;
      }
    },
    change(i) {
      this.mark = i;
    },
    prev() {
      this.mark--;
      if (this.mark === -1) {
        this.mark = this.img.length - 1;
        return;
      }
    },
    next() {
      this.mark++;
      if (this.mark === this.img.length) {
        this.mark = 0;
        return;
      }
    },
    autoPlay() {
      this.mark++;
      if (this.mark === this.img.length) {
        this.mark = 0;
        return;
      }
    },
    play() {
      this.time = setInterval(this.autoPlay, 3000);
    },
    enter() {
      clearInterval(this.time);
    },
    leave() {
      this.play();
    },
    arrlchange() {
      this.arrl = 1;
      this.arrr = 0;
    },
    arrrchange() {
      this.arrr = 1;
      this.arrl = 0;
    },
    arrlout() {
      this.arrl = 0;
    },
    arrrout() {
      this.arrr = 0;
    }
  },
  computed: {
    // ul永远居中显示
    posCenter() {
      // 总长度/2
      return -(this.img.length * 14 + this.img.length * 10) / 2;
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scroll);
    // this.$ajax.post(this.Ipurl + "homeInfo/query").then(res => {
    // this.result1 = res.data.dataInfo;
    // this.imgArr = this.result1.img1.");
    // this.img = this.imgArr;split(";
    // });
    this.play();
  }
};
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.banner {
  width: 100%;
  height: 574px;
  position: relative;
}
.banner2Img1 {
  position: absolute;
  right: 60px;
  top: 100px;
}
.container {
  width: 1200px;
  left: 50%;
  margin-left: -600px;
  position: absolute;
  height: 100%;
}
.arrowL {
  position: absolute;
  top: 50%;
  margin-top: -72px;
  left: 0;
  z-index: 800;
}
.arrowR {
  position: absolute;
  top: 50%;
  margin-top: -72px;
  right: 0;
  z-index: 800;
}
.smallContainer {
  width: 670px;
  margin: 0 auto;
  margin-top: 10px;
  height: 574px;
  text-align: center;
  position: relative;
  transition: all 1s;
}
.smallContainer .oneP {
  color: rgb(34, 34, 34);
  font-size: 36px;
  margin-top: 45px;
}
.smallContainer .oneImg {
  margin-top: 20px;
}
.twoP {
  margin-top: 20px;
  font-size: 16px;
  color: rgb(34, 34, 34);
  font-weight: 100;
}
.smallContainer .twoImg {
  position: absolute;
  top: 250px;
  left: 0;
}
.smallContainer .threeImg {
  position: absolute;
  top: 190px;
  left: 234px;
}
.smallContainer .fourImg {
  position: absolute;
  top: 410px;
  left: 234px;
}
.smallContainer .fiveImg {
  position: absolute;
  top: 320px;
  right: 0;
}
.smallContainer .sixImg {
  position: absolute;
  top: 250px;
  right: 160px;
}
.smallContainer .sevenImg {
  position: absolute;
  top: 465px;
  left: 40px;
}
.smallContainer .dotOne {
  position: absolute;
  top: 460px;
  right: 310px;
}
.smallContainer .dotTwo {
  position: absolute;
  top: 460px;
  right: 340px;
}
.flowPass {
  width: 100%;
  height: 150px;
  -moz-box-shadow: 0px 0px 16px #d4d4d4;
  -webkit-box-shadow: 0px 0px 16px #d4d4d4;
  box-shadow: 0px 0px 16px #d4d4d4;
  position: absolute;
  top: 500px;
  left: 0;
  z-index: 999;
  overflow: hidden;
  background-color: #fff;
}
.flowPass ul li {
  width: 300px;
  height: 150px;
  float: left;
}
.flowPass ul li > div {
  width: 240px;
  height: 95px;
  margin-top: 18px;
  margin-left: 14px;
  position: relative;
}
.flowPass .flex {
  display: flex;
  margin-top: 30px;
  overflow: hidden;
}
.flexL {
  float: left;
  width: 40%;
}
.flexR {
  width: 60%;
  float: right;
}
.flowPass ul li > div > p {
  font-size: 16px;
  color: rgb(34, 34, 34);
}
.p {
  color: rgb(34, 34, 34);
  font-size: 30px;
}
.flexR p {
  font-size: 14px;
  line-height: 20px;
  color: rgb(34, 34, 34);
  word-spacing: 1px;
  margin-left: 10px;
}
.flexR p:nth-child(2) {
  margin-top: 5px;
}
.flexLine {
  float: right;
  width: 1px;
  height: 34px;
  background-color: #d2d2d2;
  position: absolute;
  top: 35px;
  right: 0;
}
.flexP {
  font-size: 22px;
  color: #545454;
  margin-left: 20px;
}
.bullet {
  position: absolute;
  bottom: 100px;
  left: 50%;
  z-index: 800;
}
.bullet span {
  margin-left: 10px;
}
.bullet span:first-child {
  margin-left: 0px;
}
.needImg {
  width: 1200px;
  height: 182px;
  position: absolute;
  bottom: -90px;
  left: 50%;
  margin-left: -600px;
  background: url("../../assets/img/banner-3/only.png");
  z-index: 99;
  background-size: 100%;
}
.wechat {
  position: absolute;
  top: 284px;
  left: 23px;
}
.wechatBottom {
  position: absolute;
  top: 294px;
  left: 22px;
}
.weibo {
  position: absolute;
  top: 320px;
  left: 205px;
}
.weiboBottom {
  position: absolute;
  top: 330px;
  left: 203px;
}
.blue {
  position: absolute;
  top: 380px;
  left: -100px;
}
.blueBottom {
  position: absolute;
  top: 390px;
  left: -100px;
}
.oneai {
  position: absolute;
  top: 162px;
  left: 285px;
}
.oneaiBottom {
  position: absolute;
  top: 242px;
  left: 320px;
}
.yellow {
  position: absolute;
  top: 190px;
  left: 558px;
}
.yellowBottom {
  position: absolute;
  top: 210px;
  left: 553px;
}
.zise {
  position: absolute;
  top: 290px;
  left: 557px;
}
.ziseBottom {
  position: absolute;
  top: 310px;
  left: 553px;
}
.green {
  position: absolute;
  top: 340px;
  left: 656px;
}
.greenBottom {
  position: absolute;
  top: 360px;
  left: 653px;
}
.isbanner3 {
  width: 1200px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -600px;
  cursor: pointer;
}
.isbanner3 > .oneP {
  margin-top: 110px;
  margin-right: 290px;
}
.isbanner3 > .ppp {
  margin-left: 360px;
}
.isbanner3 p > span {
  font-size: 14px;
  color: #000;
  margin-left: 10px;
  font-size: 16px;
}
.ppp {
  margin-top: 20px;
  margin-left: 490px;
  text-align: left;
}
.ppp:last-child span {
  margin-left: 0px;
}
.ppp1 {
  margin-top: 30px;
}
.isbanner3 p > span > span {
  font-size: 13px;
  color: #fff;
}
.banner3one {
  position: absolute;
  left: 200px;
  top: 200px;
}
.banner3two {
  position: absolute;
  left: 110px;
  top: 251px;
}
.banner3three {
  position: absolute;
  left: 74px;
  top: 324px;
}
.banner3four {
  position: absolute;
  left: 116px;
  top: 396px;
}
.banner3five {
  position: absolute;
  left: 210px;
  top: 457px;
}
.banner3six {
  position: absolute;
  right: 219px;
  top: 200px;
}
.banner3seven {
  position: absolute;
  right: 141px;
  top: 251px;
}
.banner3eight {
  position: absolute;
  right: 53px;
  top: 324px;
}
.banner3nine {
  position: absolute;
  right: 0px;
  top: 396px;
}
.banner3ten {
  position: absolute;
  right: 146px;
  top: 457px;
}

/*浮动动画*/
@keyframes floatImg {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-7px);
  }
}
.wechat,
.blue,
.weibo,
.zise,
.yellow,
.green,
.oneai,
.twoImg,
.threeImg,
.fiveImg,
.banner2Img1 {
  animation: floatImg 2s linear infinite alternate-reverse;
}
</style>


